<template>
	<!--通讯录-左侧导航  :style="{display:is_shrink?'none':'flex'}" -->
	<view class="alphabet">
		<view class="alphabet-item" v-for="(item, ind) of phones" :key="item.id" :data-key="item.no"
			:class="activeClass == item.no ? 'active' : ''" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
			@touchend="handleTouchEnd" @touchcancel="handleTouchCancel">
			{{item.name}}
		</view>
		<view class="alphabet-add" @click="leftAdd" v-if="leftNavAdd && userRole.groupStatu">
			<image class="alphabet-item-icon" :src="$mAssetsPath.icon_add3"></image>
		</view>
<!--		<view class="alphabet-alert" v-if="touchmove">-->
<!--			{{activeClass}}-->
<!--		</view>-->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	export default {
		name: "phone-alphabet",
		props: {
			phones: Array,
			phoneListIndex: {
				type: String,
				default: 'A'
			},
			is_shrink:{
				type:Boolean,
				default:false
			},
			leftNavAdd:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				touchStatus: false,
				timer: null,
				activeClass: 'A',
				phonesArr: [],
				touchmove: false
			};
		},
		mounted() {
			let phonesArr = []
			this.phones.forEach(item => {
				phonesArr.push(item.no)
			})
			//let phonesArr = Object.keys(this.phones)
			this.phonesArr = phonesArr
			console.log(123456, this.phonesArr)
			console.log(1111,this.phones)
		},
		computed: {
			...mapGetters(['companyInfo','userInfo','userRole']),
		},
		watch: {
			phoneListIndex(index) {
				console.log(990,index)
				this.activeClass = index
			}
		},
		methods: {
			//增加左侧导航
			leftAdd(){
				this.$emit('leftAdd')
			},
			handleTouchStart(e) {
				this.$emit('reset', false)
				let key = e.target.dataset.key
				this.activeClass = key
				this.$emit('change', e.target.dataset.key)
				this.touchStatus = true
			},
			handleTouchMove(e) {
				this.$emit('scrollAnimationOFF', false)
				if (this.touchStatus) {
					this.touchmove = true
					if (this.timer) {
						clearTimeout(this.timer)
					}
					this.timer = setTimeout(() => {
						const touchY = e.touches[0].clientY - 54
						const index = Math.floor(touchY / 20)
						if (index >= 0 && index < this.phonesArr.length) {
							this.activeClass = this.phonesArr[index]
							this.$emit('change', this.phonesArr[index])
						}
					}, 16)
				}
			},
			handleTouchEnd(e) {
				this.$emit('scrollAnimationOFF', true)
				this.touchStatus = false
				this.touchmove = false
			},
			handleTouchCancel(){

			}
		}
	}
</script>

<style lang="scss">
	.alphabet-add {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}

	.alphabet-item-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.alphabet>.active,
	.hover {
		color: $font-color-b3;
		border-left: 6rpx solid $border-color-blue;
		background: $uni-bg-color;
	}

	.alphabet {
		height: 100vh;
		padding-bottom: 400rpx;
		overflow-y: scroll;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
		z-index: 10;
		transition: transform 0.3s ease;
	}
	.alphabet--left {
		left: 0;
		/* #ifdef APP-NVUE */
		transform: translateX(-250upx);
		/* #endif */
		/* #ifndef APP-NVUE */
		transform: translateX(-250upx);
		/* #endif */
	}

	.alphabet-item {
		padding: 0 10upx;
		width: 250upx;
		font-size: 32upx;
		height: 100upx;
		line-height: 100upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.alphabet-alert {
		position: absolute;
		z-index: 20;
		width: 160upx;
		height: 160upx;
		left: 50%;
		top: 50%;
		margin-left: -80upx;
		margin-top: -80upx;
		border-radius: 80upx;
		text-align: center;
		line-height: 160upx;
		font-size: 70upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>
